<template>
  <div class="common-layout">
    <el-container>
        <!-- 页面左侧 -->
      <el-aside width="200px">
          <img src="@/assets/1.png" class="image"/>
          <el-menu :default-openeds="['1', '4']" unique-opened="true" router="true">
                <!-- 次级菜单 -->
                <el-menu-item index="/ybp">
                    <el-icon><Odometer /></el-icon>仪表盘
                </el-menu-item>
            
                <el-sub-menu index="2" >
                    <template #title>
                        <el-icon><Menu /></el-icon>常用设置
                    </template>
                    <!-- 次级菜单项 -->
                    <el-menu-item-group>
                        <el-menu-item index="/jsgl">教师管理</el-menu-item>
                        <el-menu-item index="/xsgl">学生管理</el-menu-item>
                        <el-menu-item index="/gggl">公告管理</el-menu-item>
                        <el-menu-item index="/xtpz">系统配置</el-menu-item>
                        <el-menu-item index="/pdfwq">判断服务器</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>

                <el-sub-menu index="3">
                    <template #title>
                        <el-icon><Aim /></el-icon>问题
                    </template>
                    <!-- 次级菜单项 -->
                    <el-menu-item-group>
                        <el-menu-item index="/wtlb">问题列表</el-menu-item>
                        <el-menu-item index="/zjxm">增加项目</el-menu-item>
                        <el-menu-item index="/drdctm">导入导出题目</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>

                <el-sub-menu index="4">
                    <template #title>
                        <el-icon><Trophy /></el-icon>比赛&练习
                    </template>
                    <!-- 次级菜单项 -->
                    <el-menu-item-group>
                        <el-menu-item index="/bslb">比赛列表</el-menu-item>
                        <el-menu-item index="/cjbs">创建比赛</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>

                <el-sub-menu index="5">
                    <template #title>
                        <el-icon><Collection /></el-icon>课程
                    </template>
                    <!-- 次级菜单项 -->
                    <el-menu-item-group>
                        <el-menu-item index="/kclb">课程列表</el-menu-item>
                        <el-menu-item index="/cjkc">创建课程</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-menu>
      </el-aside>

      <!-- 页面右侧 -->
      <el-container>
        <el-header>
            <el-dropdown>
                <span>
                    <el-icon><Search /></el-icon>
                    <el-icon><Share /></el-icon>username
                    <el-icon><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>logout</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-header>



        <!-- 右侧中间 -->
        <el-main>
            <!-- <el-card>
                <template #header>
                <div class="bt"> 
                    <span>标题</span>
                </div>
                </template>
                <div class="nr">主题内容</div>
            </el-card> -->
            <router-view></router-view>
        </el-main>




        <el-footer>Bulid Version:20210929cd</el-footer>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import {Odometer,Menu,Aim,Trophy,Collection,Search,Share} from '@element-plus/icons-vue'
import { ArrowDown } from '@element-plus/icons-vue'
export default {
    data(){
        return{
        }
    },
    components:{
        Odometer,Menu,Aim,Trophy,Collection,Search,Share,ArrowDown
    },
    methods:{

    }
}
</script>




<style>
.el-header{
    background-color: #F9FAFC;
    color: var(--el-text-color-primary);
    text-align: right;
    line-height: 60px;
}
.el-footer{
    background-color: #EDECEC;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 60px;
}
.el-main{
    background-color: #EDECEC;
}
.image{
    width: 200px;
}
.bt{
   text-align: left;
}
.nr{
    height: 300px;
}
</style>